<template>
  <div class="query-page">
    <div class="vertical" v-if="isVertical">
      <div class="res-header" v-if="totalSize">
        结果条数: {{isMaxCot}}条
        <div class="toggle-wrap">
          <a href="javascript:;" class="btn-toggle btn-gohome" @click="goHomePage()">返回首页</a>
          <a href="javascript:;" class="btn-toggle" @click="showAllToggle(showAll)">一键{{showAll ? '收起' :　'展开'}}</a>
          <span class="share" @click="share">
            <img src="@/assets/images/QQ.png" alt="">
            <img src="@/assets/images/weixin.png" alt="">
          </span>
        </div>
      </div>
      <div class="txt-center loading-wrap" v-if="loading">
        <inline-loading></inline-loading><span class="loading-txt">加载中...</span>
      </div>
      <div class="null-cont" v-if="!loading && !totalSize">
        没有匹配到相关的院校和专业<br />请适当调整你的筛选条件
      </div>
      <div class="school-wrap" v-else>
        <ul class="school-list">
          <li v-for="(item, idx) in queryData" :key="idx">
            <div class="s-title" @click="showItemToggle(idx)">
              <span class="s-name">{{item.university}}</span>
              <div class="s-major-wrap">
                <span class="s-tip" :class="[item.policy==101?'c':(item.policy==102?'w':'b')]">{{ item.policy==101?"冲":(item.policy==102?"稳":"保") }}</span>
                <span class="s-major">{{item.major}} ({{ item.mlevel=="本科"?"本":"专" }})</span>
              </div>
              <i class="iconfont icon-jiantouxia i-more" :class="[{'show': item.show}]"></i>
            </div>
            <div class="s-body" :class="[{'animate': item.show}]">
              <div class="s-block">
                <div class="w33">院校代码: {{item.incode}}</div>
                <div class="w33">专业代码: {{item.mcode}}</div>
                <div class="w33">学制/学费: {{item.year}} / {{item.fee}}</div>
              </div>
              <div class="s-block">
                <div class="w50">所在地区: {{provinceCity(item.province, item.city)}}</div>
                <div class="w50">主管部门: {{item.dept}}</div>
              </div>
              <div class="s-block">
                <span>2018录取最低成绩/位次号: {{item.lowscore2018 ? item.lowscore2018 : '-'}} / {{item.lowrank2018 ? item.lowrank2018 :'-'}}</span>
              </div>
              <div class="s-block s-tip" v-if="item && item.remark">
                <span>简注：{{item.remark}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="horizontal" v-else>
      <div class="res-header res-header-h" v-if="totalSize">
        结果条数: {{isMaxCot}}条
        <div class="toggle-wrap">
          <a href="javascript:;" class="btn-toggle btn-gohome" @click="goHomePage()">返回首页</a>
        </div>
      </div>
      <div class="txt-center loading-wrap" v-if="loading">
        <inline-loading></inline-loading><span class="loading-txt">加载中...</span>
      </div>
      <div class="null-cont" v-if="!loading && !totalSize">
        没有匹配到相关的院校和专业<br />请适当调整你的筛选条件
      </div>
      <div class="school-wrap-h" v-else>
        <div class="sw-head clearfix" v-if="totalSize">
          <div class="swh-item" style="width: 8%">院校代码</div>
          <div class="swh-item" style="width: 15%">院校名称</div>
          <div class="swh-item" style="width: 8%">专业代码</div>
          <div class="swh-item" style="width: 15%">专业名称 </div>
          <div class="swh-item" style="width: 12%">主管部门</div>
          <div class="swh-item" style="width: 10%">所在地区</div>
          <div class="swh-item" style="width: 10%">学年/学费</div>
          <div class="swh-item" style="width: 12%">18年录取最<br />低分数/位次</div>
        </div>
        <div class="sw-body">
          <div class="sw-row" v-for="(item, idx) in queryData" :key="idx">
            <div class="sw-data">
              <div class="sw-item" style="width: 8%">{{item.incode}}</div>
              <div class="sw-item name" style="width: 15%">{{item.university}}</div>
              <div class="sw-item" style="width: 8%">{{item.mcode}}</div>
              <div class="sw-item s-major-wrap" style="width: 15%">
                <span class="s-tip" :class="[item.policy==101?'c':(item.policy==102?'w':'b')]">{{ item.policy==101?"冲":(item.policy==102?"稳":"保") }}</span>
                <span>{{item.major}}({{ item.mlevel=="本科"?"本":"专" }})</span></div>
              <div class="sw-item" style="width: 12%">{{item.dept}}</div>
              <div class="sw-item" style="width: 10%">{{provinceCity(item.province, item.city)}}</div>
              <div class="sw-item" style="width: 10%">{{item.year}} / {{item.fee}}</div>
              <div class="sw-item" style="width: 12%">{{item.lowscore2018 ? item.lowscore2018 : '-'}} / {{item.lowrank2018 ? item.lowrank2018 :'-'}}</div>
            </div>
            <div class="remark" v-if="item && item.remark">简注：{{item.remark}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tip" ref="tip">
      <p>使用浏览器的分享功能，把查询结果分享出去吧！</p>
      <p>ios系统请点击 <img src="@/assets/images/share_ios.png"> android系统使用 <img src="@/assets/images/share_android.png"></p>
    </div>

    <div v-if="isMaxCot>200" style="opacity:1;color:#fff;padding:10px;line-heigth:20px;border-radius:5px;" class="tip">
      <div>当前筛选条件过于宽泛，导致查询结果条数过多，请精简筛选条件，确保查询结果条数在200条以内 <span @click="$router.push({name:'queryStep1'})" style="text-decoration:underline ;"> 重新查询>></span> </div>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import { InlineLoading } from 'vux'
export default {
  components: {
    InlineLoading
  },
  data() {
    return {
      examType: null,  // 考生类型
      loading: false,
      queryData: [],
      totalSize: 0,
      showAll: false,
      isVertical: true,
      uuid: '',
      isMaxCot: 0
    }
  },
  mounted() {
    let that = this
    window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', () => {
      that.orientationFun()
    }, false)
  },
  created() {
    this.orientationFun()
    let _userData = Utils.local('userData')
    if (_userData) {
      this.examType = (_userData).examType
    }
    if (this.$route.query.uuid) {
      this.uuid = this.$route.query.uuid
      this.getShareResult(this.$route.query.uuid)
    } else {
      if (this.examType === 2) {
        let qsData = { name: '' }
        Api.getArtCategory(qsData).then(res => {
          this.getShcoolResult(res.data.array)
        })
      } else {
        this.getShcoolResult()
      }
    }
  },
  methods: {
    // 判断横屏还是竖屏
    orientationFun() {
      if (window.orientation === 90 || window.orientation === -90) {
        this.isVertical = false
      } else {
        this.isVertical = true
      }
    },
    // 获取院校结果
    getShcoolResult(selArr) {
      this.loading = true
      let analysisType = 1 // 0 按成绩查询 1 按位次号查询
      let schoolLevel = null
      let area = null
      let selectArr = null
      let zhuanyeArr = null
      let categorys = []
      let ctype = 0
      let majorLevel = 0
      // 已选项赋值
      if (Utils.session('schoolLevel')) {
        schoolLevel = (Utils.session('schoolLevel'))
      }
      if (Utils.session('areaString')) {
        area = (Utils.session('areaString'))
      }
      if (selArr) {
        selectArr = selArr
      } else if (Utils.session('selectArr')) {
        selectArr = (Utils.session('selectArr'))
      }
      if (Utils.session('zhuanyeArr')) {
        zhuanyeArr = (Utils.session('zhuanyeArr'))
      }
      if (Utils.session('majorLevel')) {
        majorLevel = (Utils.session('majorLevel'))
      }

      if (selectArr.length) {
        ctype = 0
        selectArr.map(item => {
          categorys.push(item.code)
        })
      } else {
        ctype = 1
        categorys = zhuanyeArr
      }
      categorys = categorys || [];
      let qsData = {
        type: analysisType,
        schoolLevel: schoolLevel.join(','),
        area: area.join(','),
        categorys: categorys.join(','),
        ctype: ctype,
        majorLevel: majorLevel
      }
      Api.getResultByCategory(qsData).then(res => {
        if (res) {
          this.queryData = res.data.array
          this.totalSize = res.data.size
          this.loading = false;
          this.isMaxCot = parseInt(res.message || 0)
        }
      })
    },
    // 展开/收起
    showItemToggle(idx) {
      let item = this.queryData[idx]
      item.show = !item.show
      this.$set(this.queryData, idx, item)
    },
    // 一键展开/收起
    showAllToggle() {
      this.showAll = !this.showAll
      this.queryData.map((item, idx) => {
        item.show = this.showAll
      })
    },
    // 返回省市
    provinceCity(province, city) {
      if (
        province === '北京' ||
        province === '上海' ||
        province === '重庆' ||
        province === '天津'
      ) {
        return city
      } else {
        return province + city.substring(0, city.length)
      }
    },
    // 返回首页
    goHomePage() {
      // Utils.session('schoolLevel', '')
      // Utils.session('area', '')
      // Utils.session('areaString', '')
      // Utils.session('selectArr', '')
      // Utils.session('zhuanyeArr', '')
      // Utils.session('zhuanye', '')
      this.$router.push({ name: 'home' })
    },
    // QQ & Wx 分享
    share() {
      let that = this
      if (!that.$route.query.uuid) {
        Api.saveResult({ result: JSON.stringify(that.queryData) }).then(res => {
          if (res.code === 20000) {
            that.uuid = res.data.uuid
            if (this.isWxInIos()) {
              that.$router.push({
                name: 'queryStep4',
                query: {
                  uuid: that.uuid
                }
              })
            } else {
              setTimeout(() => {
                window.location.href = `/query/sp/4?uuid=${this.uuid}`
              }, 2000)
            }
          }
        })
      }
      that.$refs.tip.style.opacity = 1
      setTimeout(() => {
        that.$refs.tip.style.opacity = 0
      }, 3000)
    },
    // 分享获取数据
    getShareResult(str) {
      let taht = this
      taht.loading = true
      Api.getResult({ uuid: str }).then((res) => {
        if (res.code === 20000) {
          taht.queryData = JSON.parse(res.data.result)
          taht.totalSize = taht.queryData.length
          taht.loading = false
        }
      })
    },
    // 判断是ios中的微信设备
    isWxInIos() {
      let u = navigator.userAgent
      // ios终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isiOS) {
        let ua = window.navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) === 'micromessenger') {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.query-page {
  height: 100%;
}
.res-header {
  padding: 0.266667rem 0.266667rem;
  font-size: 15px;
  color: #ff8600;
  position: relative;
  &.res-header-h {
    background-color: #ffa440;
    color: #fff;
    padding: 0.166667rem 0.166667rem;
    position: fixed;
    width: 100%;
    z-index: 999;
    .btn-toggle {
      background-color: #fff;
      color: #ffa440;
      padding: 0.063333rem 0.166667rem;
      margin-right: 0 !important;
      background-image: none;
    }
  }
  .toggle-wrap {
    position: absolute;
    right: 0.266667rem;
    top: 0.16rem;
    display: inline-flex;
  }
  .btn-toggle {
    padding: 0.133333rem 0.266667rem;
    font-size: 13px;
    background-image: linear-gradient(90deg, #ffa440 0%, #ff8600 100%);
    border-radius: 0.08rem /* 3/37.5 */;
    color: #fff;
    &.btn-gohome {
      margin-right: 0.266667rem /* 10/37.5 */;
    }
  }
}
.loading-wrap {
  padding: 1.333333rem;
  .loading-txt {
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    margin-left: 0.16rem;
  }
}
.null-cont {
  padding-top: 2.666667rem;
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 0.586667rem;
  position: relative;
  z-index: 100000;
  background-color: #fff;
}
.school-wrap {
  height: calc(100% - 1.12rem);
  overflow: auto;
}
.school-list {
  color: #333;
  li {
    border-bottom: 1px solid #fff;
  }
  .s-title {
    font-size: 14px;
    padding: 0.16rem 0 0.16rem 0.266667rem;
    background-color: #ffd9b0;
    position: relative;
    .s-name {
      width: 50%;
      display: inline-block;
      vertical-align: middle;
    }
    .s-major-wrap {
      width: 40%;
      display: inline-block;
      vertical-align: middle;
      padding-left: 0.693333rem;
      position: relative;
    }
    .i-more {
      position: absolute;
      right: 0;
      top: 0;
      color: #333;
      padding: 0 0.266667rem;
      height: 100%;
      display: flex;
      align-items: center;
      transition: all 0.2s;
      transform: rotate(0deg);
    }
    .i-more.show {
      transform: rotate(180deg);
    }
  }
  .s-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
    .s-block {
      padding: 0.16rem 0.266667rem;
      font-size: 13px;
      display: flex;
      &:nth-child(2n) {
        background-color: #f2f2f2;
      }
      .w33 {
        width: 33.333333%;
      }
      .w50 {
        width: 50%;
      }
    }
    .s-tip {
      color: #999;
      font-size: 12px;
    }
  }
}
.school-wrap-h {
  padding-top: 1.4rem;
  .sw-head {
    background-color: #e7eef4;
    position: fixed;
    width: 100%;
    top: 0.72rem;
    z-index: 999;
    display: table-row;
    .swh-item {
      display: table-cell;
      border-right: 1px solid #fff;
      padding: 0.063333rem 0 /* 5/37.5 */;
      text-align: center;
      color: #ff8600;
      font-size: 13px;
      line-height: 15px;
      vertical-align: middle;
      &:last-child {
        border-right: none;
      }
    }
  }
  .sw-body {
    .sw-row {
      &:nth-child(2n) {
        background-color: #f8f9fb;
      }
    }
    .sw-data {
      display: table-row;
      .sw-item {
        display: table-cell;
        padding: 0.1rem 0.06rem;
        text-align: center;
        font-size: 13px;
        vertical-align: middle;
        &.name {
          text-align: left;
        }
      }
    }
  }
}
.s-major-wrap {
  position: relative;
  .s-tip {
    width: 0.533333rem;
    height: 0.746667rem;
    position: absolute;
    top: calc((100% - 0.693333rem) / 2);
    left: 0;
    background-size: 100%;
    line-height: 0.426667rem;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background-repeat: no-repeat;
    &.w {
      background-image: url(../../assets/images/i_w.png);
    }
    &.b {
      background-image: url(../../assets/images/i_b.png);
    }
    &.c {
      background-image: url(../../assets/images/i_c.png);
    }
  }
}
.school-wrap-h {
  .s-major-wrap {
    text-align: left !important;
    padding-left: 0.4rem !important;
    .s-tip {
      width: 0.333333rem;
      height: 0.546667rem;
      font-size: 10px;
      line-height: 0.3rem;
      top: inherit;
    }
  }
}
.remark {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #666;
  text-align: left;
  font-size: 12px;
  padding: 0.06rem 0.15rem;
}
.share {
  float: right;
  margin-left: 0.106667rem /* 4/37.5 */;
  height: 0.714667rem /* 26.8/37.5 */;
  img {
    width: 0.714667rem /* 26.8/37.5 */;
    height: auto;
    cursor: pointer;
    margin-left: 0.106667rem /* 4/37.5 */;
  }
}
.tip {
  position: fixed;
  top: 25%;
  left: calc(50% - 4.666667rem /* 175/37.5 */);
  width: 9.333333rem /* 350/37.5 */;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.16rem /* 6/37.5 */;
  transition: 1s all;
  opacity: 0;
  p {
    color: #fff;
    font-size: 15px;
    padding: 0.106667rem /* 4/37.5 */;
    img {
      width: 0.5rem /* 24/37.5 */;
      vertical-align: middle;
    }
  }
}
</style>

